<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>多级分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <link href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}" media="all" rel="stylesheet" type="text/css">
</head>
<style>
    .panel {
        margin-bottom: 0;
    }
    i{
        cursor: pointer !important ;
        cursor: hand !important;
    }
    body{

    }
    a:hover{
        background-color:#E6E6E6 ;
    }
    .active{
        background:#E6E6E6;
    }
    .hide{
        display:none;
    }
</style>
<body style="height:100%;">

    <div style="height:100%;">
        <div class="panel panel-default"
         style=" position:fixed;   width: 250px; height:800px;   overflow:auto;">
            <div class="panel-body"  style=" ">
                <h4 style="text-align: center;">分类管理</h4>
                <ul unselectable="on" id="demo"
                    style="margin-top: 30px; -moz-user-select: none; -webkit-user-select: none;"
                    onselectstart="return false;"  ></ul>
                <button  id="addcate" class="layui-btn  layui-btn-primary"  style="margin-top:20px; margin-left:28px; width:70%;">添加分类</button>
            </div>
        </div>
    </div>

<script type="text/javascript" src="/static/layui/layui.js" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript">
    layui.use(['jquery','layer','element','form','tree'],function(){
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        var form  =  layui.form;
        var elem = layui.element;
        var topcateid = 0;  //为模拟顶级分类id用

        //初始化layer.tree
        var tree = layui.tree({
            elem: '#demo',
            nodes:[     //这里可以通过后台获取（如ThinkPHP框架则可以通过后台拼接好，再生成模板变量类似{$tree}就可以）
                {
                    id: 1,
                    name: '父节点1'
                    ,children: [{
                        id: 11,
                        name: '子节点11',
                    },{
                        id: 12,
                        name: '子节点12'
                    }]
                },{
                    id: 2,
                    name: '父节点2'
                    ,children: [{
                        id: 21,
                        name: '子节点21'
                        ,children: [{
                            id: 211,
                            name: '子节点211'
                        }]
                    }]
                }]
            ,click: function(node){
                console.log(node) //node即为当前点击的节点数据
            }
        });

        window.onload=function(){

            //删除layui-tree自带的样式
            $("i.layui-tree-branch").remove();
            $("i.layui-tree-leaf").remove();
            //添加操作的图标(即鼠标划过时显示的添加，修改，删除的按钮组)
            $("ul#demo").find("a").after("<i class='layui-icon add select hide ' )'></i>"+
                "<i class='layui-icon edit select hide'></i>"+
                "<i class='layui-icon del select hide'></i>");
        }

        //添加顶级分类
        $("#addcate").on("click",function(){
            layer.prompt({title: '输入分类名称，并确认', formType:0}, function(text, index){
                layer.close(index);
                //TODO 可以ajax到后台操作，这里只做模拟
                layer.load(2);
                setTimeout(function(){
                    layer.closeAll("loading");
                    // 手动添加节点，肯定有更好的方法=.=！这里的方法感觉有点LOW
                    // li里面的pid属性为父级类目的id,顶级分类的pid为0
                    topcateid= topcateid+1;
                    $("ul#demo").append("<li  pid='0' id="+(topcateid)+">"+
                        "<a ><cite>"+text+"</cite> </a>"+
                        "<i class='layui-icon select hide add'></i>"+
                        "<i class='layui-icon edit select hide'></i>"+
                        "<i class='layui-icon del select hide'></i>"+
                        "</li>");
                },500)
            });
        })

        //显示/隐藏 分类的操作栏
        $("ul#demo").on({
            mouseover: function(event) {
                event.stopPropagation();
                $(this).children(".select").removeClass("hide")
            },
            mouseout: function(event) {
                event.stopPropagation();
                $(this).children(".select").addClass("hide")
            },
        },"li","a")

        //添加子分类
        $("ul#demo ").on("click","li .add",function(){

            var pid = $(this).closest("li").attr("id");//将父级类目的id作为父类id
            var that= $(this).closest("li");
            layer.prompt({title: '输入子分类名称，并确认', formType:0}, function(text, index){
                layer.close(index);

                //TODO 可以ajax到后台操作，这里只做模拟
                layer.load(2);
                setTimeout(function(){
                    layer.closeAll("loading");
                    topcateid= topcateid+1;
                    if(that.children("ul").length == 0){
                        //表示要新增   i 以及 ul 标签
                        that.prepend('<i class="layui-icon layui-tree-spread"></i>');
                        that.append("<ul class='layui-show'><li pid="+pid+" id="+(topcateid)+"><a><cite>"+text+"</cite> </a><i class='layui-icon select hide add' )'></i> <i    class='layui-icon edit select hide'></i> <i    class='layui-icon del select hide'></i></li></ul>")
                    }else{
                        that.children("ul").append("<li pid="+pid+" id="+(topcateid)+"><a><cite>"+text+"</cite> </a><i class='layui-icon select hide add' )'></i> <i    class='layui-icon edit select hide'></i> <i    class='layui-icon del select hide'></i></li>");
                    }
                },500)
            });
        })

        //重命名
        $("ul#demo ").on("click","li .edit",function(){
            var node=$(this).parent().children("a").children("cite");
            // 获取父类ID
            var id=$(this).parent().attr("id");
            var that= $(this).closest("li");
            layer.prompt({title: '输入新的分类名称，并确认',value:node.text(), formType:0}, function(text, index){
                layer.close(index);
                //TODO 可以ajax到后台操作，这里只做模拟
                layer.load(2);
                setTimeout(function(){
                    layer.closeAll("loading");
                    node.text(text);
                },1000)
            });
        })

        //删除分类
        $("ul#demo ").on("click","li .del",function(){
            var that= $(this).closest("li");
            if(that.children("ul").length > 0){
                layer.msg("该分类下含有子分类不能删除");
                return;
            }
            // 获取该分类的父分类ID
            var id=$(this).parent().attr("id");

            layer.confirm('确定要删除？该分类下的子分类亦将删除！', {
                btn: ['删除','取消']
            }, function(){

                //TODO 可以ajax到后台操作，这里只做模拟
                layer.load(2);
                setTimeout(function(){
                    layer.closeAll("dialog");
                    layer.closeAll("loading");
                    if((that.parent("ul").children("li").length == 1)&&(that.parent("ul").parent("li").children("i.layui-tree-spread").length=1)){
                        //要把分类名前的三角符号和ul标签删除
                        that.parent("ul").parent("li").children("i.layui-tree-spread").remove();
                    }
                    that.remove();
                },500)
            });
        })
        //打开/关闭菜单
        $("ul#demo").on({
            click:function(event){
                event.stopPropagation();
                event.preventDefault();
                if( $(this).parent().children("ul").hasClass("layui-show")){
                    $(this).html("");
                    $(this).parent().children("ul").removeClass("layui-show");
                    return;
                }else{
                    $(this).html("");
                    $(this).parent().children("ul").addClass("layui-show");
                    return;
                }
                return;
            }
        },  'i.layui-tree-spread');
    });
</script>
</body>
</html>
